<template>
  <h2>setup与ref的基本使用</h2>
  <h3>{{ count }}</h3>
  <button @click="updateCount">更新数据</button>
</template>

<script lang="ts">
// definecomponent函数，就是定义一个组件，内部可以传入一个配置对象
import { defineComponent, ref } from "vue";

// 暴漏出去一个定义好的组件
export default defineComponent({
  name: "App",
  // 需求：页面打开有一个数据，点击按钮更新数据
  // vue2实现
  // data() {
  //     return {
  //         count: 0,
  //     };
  // },
  // methods: {
  //     updateCount() {
  //         this.count++;
  //     },
  // },

  // vue3实现
  // setup是组合API的入口函数
  setup() {
    // 变量
    // let count = 0; //此时的数据不是响应式数据
    const count = ref(0);
    function updateCount() {
      // 报错：count是一个ref对啊ing，对象是不能进行count++的
      // count++;
      count.value++;
    }
    // 返回的是一个对象
    return {
      // 属性
      count,
      // 方法
      updateCount,
    };
  },
});
</script>
